<template>
	<view>
		<view class="block-view">
            <goods-info :goodsName="comments.goods_name" :goodsImg="comments.goods_img"></goods-info>
        </view>
        <view class="goods-comments">
            <view class="comments-info">
                <view class="u-flex u-row-between">
                    <view class="u-flex">
                        <view class="u-m-r-26">
                            <u-image width="70" height="70" shape="circle" :src="comments.member_face"></u-image>
                        </view>
                        <view>{{ comments.member_name }}</view>
                    </view>
                    <view class="time-info">{{ comments.create_time | date }}</view>
                </view>
                <view class="grade-info">
                    <view>{{ comments.grade | filterGrade }}</view>
                    <!-- <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#f42424" v-for="(star, starIndex) in comments.grade" :key="starIndex"></u-icon> -->
                </view>
                <view class="u-p-l-35 u-p-r-35">
                    <view class="u-m-b-20 u-line-5">{{ comments.content }}</view>
                    <view class="u-flex u-flex-wrap" v-if="comments.images">
                        <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comments.images" :key="imgIndex">
                            <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comments.images, imgIndex)"></u-image>
                        </view>
                    </view>
                    <view class="audit-status">
                        初评审核状态：
                        <view v-if="comments.audit_status === 'WAIT_AUDIT'">您的初评待审核，不能进行追评</view>
                        <view v-if="comments.audit_status === 'REFUSE_AUDIT'">您的初评审核未通过，不能进行追评</view>
                        <view v-if="comments.audit_status === 'PASS_AUDIT'">您的初评审核通过</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="block-title">
            追加评价
        </view>
        <view class="block-view">
            <view>
                <u-input v-model="form.value" :type="type" :height="height" :auto-height="autoHeight" />
            </view>
            <view>
                <u-upload :action="action" :header="header" max-count="5" @on-list-change="onListChange"></u-upload>
            </view>
        </view>
        <view class="block-view u-margin-top-10">
            <u-button type="error" @click="submit">提交追评</u-button>
        </view>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import * as API_Member from '@/api/members.js'
    import { api } from '@/config/config'
    import Cache,{Keys} from '@/utils/cache.js'

	export default {
		data() {
			return {
                action: `${api.buyer}/uploaders`,
                header:  { Authorization: Cache.getItem(Keys.accessToken) },
                params: {
                    order_sn: '',
                    sku_id: '',
                },
                comments: {},
                images: [],
                type: 'textarea',
                height: 100,
                autoHeight: true,
                form: {
                    value: '',
                }
			};
		},
        onLoad(options) {
            this.params.order_sn = options.order_sn;
            this.params.sku_id = options.sku_id;
            this.loadData();
        },
        filters: {
              /** 评分 */
              filterGrade(val) {
                switch (val) {
                  case 'bad':
                    return '差评'
                  case 'neutral':
                    return '中评'
                  default:
                    return '好评'
                }
              }
            },
        methods:{
            loadData(){
                API_Member.getGoodsFirstComments(this.params).then(res =>{
                    console.log(res[0]);
                    this.comments = res[0];
                })
            },
            onListChange(lists,name){
                this.images = lists;
            },
            //图片预览
            handlePreviewImage(image, index) {
                uni.previewImage({
                    current: index,
                    urls: image
                })
            },
            //提交追评
            submit(){
                let _images = [];
                this.images.forEach(res => {
                    _images.push(res.response.url);
                })

                let _params = {
                    comment_id: this.comments.comment_id,
                    content: this.form.value,
                    grade: "good",
                    images: _images,
                    sku_id: this.comments.sku_id,
                }

                let _form = [];
                _form.push(_params);

                API_Member.appendCommentsOrder(_form).then(res => {
                    this.$refs.uToast.show({
                        title: '提交成功',
                        type: 'success',
                        url: '/mine-module/evaluation-list'
                    })
                })
            }
        }
	}
</script>

<style lang="scss">
    .block-view {
        background-color: #FFFFFF;
        padding: 5rpx 30rpx;
    }
    .block-title {
        background-color: #f3f4f6;
        padding: 10rpx 30rpx;
        font-weight: 600;
    }
    .goods-comments {
        .comments-info {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            padding: 20rpx;
            margin: 20rpx 0;
            .comment-img {
                border-radius: 10rpx;
                overflow: hidden;
            }
            .grade-info {
                margin: 10rpx 30rpx;
            }
        }
        .time-info, .reply-info {
            color: #999999;
            font-size: 24rpx;
            padding: 20rpx 30rpx;
            .reply-line {
                height: 2rpx;
                border-top: 2rpx solid #F7F7F7;
                .reply-line-txt {
                    top: -24rpx;
                    border: 12rpx solid;
                    border-color: transparent transparent #F7F7F7;
                }
            }
        }
        .audit-status {
            display: flex;
        }
    }
</style>
